<template>

<!-- 首页登陆 -->
<div class="login">
    <div class="content">
        <div>测试后台管理系统</div>
        <div class='animated  bounceIn' v-show="!showSlide">
            <span>登陆框</span>
<el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" >
<el-input  autocomplete="off" clearable placeholder='用户名输入' v-model="use"></el-input>
</el-form-item>
<el-form-item label="密码" >
<el-input clearable placeholder='密码输入' show-password v-model="passward"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="submit" @click="showSlide = true">登陆</el-button>
</el-form-item>
</el-form>

   </div>
      <div class="slideSty" v-show="showSlide">
        <slide-verify
          @success="onSuccess"
          @fail="onFail"
          :sliderText="text"
          :w="350"
          :h="175"
          ref="slideDiv"
        ></slide-verify>
        <div class="iconBtn">
          <el-button class="el-icon-circle-close" @click="showSlide = false"></el-button
          ><el-button class="el-icon-refresh" @click="refresh"></el-button>
        </div>
      </div>
    </div>





 </div>


</template>

<script>
import SlideVerify from './SlideVerify'
export default {
  data () {
    return {
      msg: '登陆',
      use:'',
      passward:'',
      showSlide: false,
      text: '向右滑动',
      dataTab1: [
        {
          params: 'l',
          type: 'Number',
          default: 42,
          info: '滑块的边长'
        },
        {
          params: 'r',
          type: 'Number',
          default: 10,
          info: '滑块突出圆的半径'
        },
        {
          params: 'w',
          type: 'Number',
          default: 310,
          info: 'canvas画布的宽'
        },
        {
          params: 'h',
          type: 'Number',
          default: 155,
          info: 'canvas画布的高'
        },
        {
          params: 'slideText',
          type: 'String',
          default: 'Slide filled right',
          info: '滑块文字'
        }
      ],
      dataTab2: [
        {
          funcName: 'success',
          type: 'Function',
          info: '验证码匹配成功的回调'
        },
        {
          funcName: 'fail',
          type: 'Function',
          info: '验证码未匹配的回调'
        },
        {
          funcName: 'refresh',
          type: 'Function',
          info: '刷新验证图片的回调'
        }
      ]
    
    }
  },
   components: {
    SlideVerify
  },
  beforeMount(){
     
        const h = this.$createElement;

        this.$notify({
          title: '账号提示',
          message: h('i', { style: 'color: teal'}, '账号：admin;密码：123')
        });
      },
      methods:{
  onSuccess() {
      this.showSlide = false,
      this.$message({
          showClose: true,
          message: '恭喜你，登陆成功',
          type: 'success'
        });
    },
      onFail() {
        this.$message({
          showClose: true,
          message: '错了哦，登陆失败',
          type: 'error'
        });
    },
     refresh() {
      this.$refs.slideDiv.reset()
    },
      }
  


}
</script>


<style scoped>

 .login{
  background: url(../../images/loginBg.jpg) no-repeat center center;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  position: fixed;
  background-size: cover;

 }
 .content{
     position: relative;
     height: 100%;
     widows: 100%;
 }
.content:first-child{
    font-size: 50px;
    margin:0 auto;
    position:absolute;
    left:35%;
    top:15%;
    
}

.demo-ruleForm{
    margin:0 auto;
    position:absolute;
    bottom:15px;  
}
.content>div:nth-child(2){
    background: #cccccc;
    width:400px;
    height: 300px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    top:50px
}
   .submit{
       width:200px
   }
span{
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    position:absolute;
    text-align:center;
}

.content>div:nth-child(3){
  position: relative;
  top:20px;
  background-color: #ffffff
}




</style>
